<template>
  <main class="container">
    <main class="content" v-if="!!getToken()">
      <van-card :thumb="userStore.avatar" class="user_card">
        <template #title>
          <p class="user_name">{{ userStore.name }}</p>
        </template>
        <template #desc>
          <p class="user_desc">{{ userStore.sex == 1 ? "男" : "女" }}</p>
        </template>
        <template #tags>
          <p class="user_sign">{{ userStore.sign }}</p>
        </template>
      </van-card>
      <div style="background: #f0f0f0; padding: 10px">
        <van-cell
          icon="logistics"
          title="我的收货地址"
          is-link
          to="/address-list"
        />
        <van-cell
          icon="orders-o"
          title="我的订单"
          is-link
          to="/order"
          @click="router.push('/order')"
        />
        <van-cell
          icon="description"
          title="我的文章"
          is-link
          to="/my-article"
        />
        <van-cell icon="star-o" title="我的收藏" is-link to="/my-collect" />
        <van-cell
          icon="good-job-o"
          title="我的点赞"
          is-link
          to="/thumbs-up"
          @click="router.push('/my-praise')"
        />
        <van-cell
          icon="setting-o"
          title="修改密码"
          is-link
          @click="router.push('/edit-password')"
        />
      </div>

      <div class="logout_box">
        <van-button class="logout_btn" type="warning" @click="logOut"
          >退出登录</van-button
        >
      </div>
    </main>
    <div v-else>
      <van-empty description="请先登录">
        <van-button
          @click="router.replace('/login')"
          round
          type="primary"
          style="width: 200px"
          >去登录</van-button
        >
      </van-empty>
    </div>
  </main>
</template>

<script setup>
import useUserInfo from "@/store/useUserInfo";
import { getToken, removeToken } from "@/utils/token";
import { logout } from "@/api/user";
import { showConfirmDialog, showSuccessToast } from "vant";
import router from "@/router";

let userStore = useUserInfo();
userStore.getUserInfo();

// 退出登录
let logOut = () => {
  showConfirmDialog({
    title: "确实退出登录",
    message: "是否确认退出登录",
  })
    .then(async () => {
      // 确定 执行登出
      await logout({ token: getToken() });
      // 清除token
      removeToken();
      showSuccessToast("退出登录成功");
      router.replace("/login");
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
main.container {
  .user_card {
    background: #f0f0f0;
    margin-bottom: 10px;
    .user_name {
      line-height: 20px;
      margin-top: 2px;
      font-size: 20px;
      color: rgb(247, 146, 64);
    }
    .user_desc {
      line-height: 20px;
      margin: 6px 0;
    }
    .user_sign {
      line-height: 20px;
      font-size: 12px;
    }
  }
  .content {
    width: 100%;
    .logout_box {
      margin-top: 18px;
      padding: 0 10px;
      .logout_btn {
        width: 100%;
      }
    }
  }
  .no_login_content {
    .login_btn {
      width: 180px;
    }
  }
}
</style>